<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/js/jquery.js"></script>
</head>
<body>
    <form>
        <input type="text" name = "name" id="tbName">
        <input type="text" name = "age" id="tbAge">
        <input type="text" name = "idcardNo" id="tbIdCardNo">
        <button id = "btnSave" type="button">save</button>
    </form>
    <table id="tbData" border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>学号</th>
        </tr>
    </table>
<script>
    function save(){
        let name=$('#tbName').val();
        let age=$('#tbAge').val();
        let idcardNo=$('#tbIdCardNo').val();
        $.post('/user/save',{
            name:name,
            age:age,
            idcardNo:idcardNo
        },
            function (res){
                console.log(res)
                if (res=="ok"){
                    let tb = $('#tbData')
                    let name=$('#tbName').val();
                    let age=$('#tbAge').val();
                    let idcardNo=$('#tbIdCardNo').val();
                    let html = "<tr><td>"+name+"</td>"+"<td>"+age+"</td>"+"<td>"+idcardNo+"</td></tr>"
                    tb.append(html);
                }
            }
        )
        console.log(name,age,idcardNo);
    }
    function loadData(){
        $.post('/user/getData',{},function (res){
            console.log(res)
            let tb = $('#tbData')
            for (let i = 0; i < res.length; i++) {
                let name = res[i].name;
                let age = res[i].age;
                let idcardNo = res[i].idcardNo;
                let html = "<tr><td>"+name+"</td>"+"<td>"+age+"</td>"+"<td>"+idcardNo+"</td></tr>"
                tb.append(html);
            }
        })
    }

    $(function (){
        $('#btnSave').click(function (){
            save();
        })
        loadData();
    })

</script>
</body>
</html>